* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
    overflow: hidden;
}
.container {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 500px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    .tit {
        font-size: 26px;
        margin: 65px auto 70px auto;
    }
    input {
        width: 280px;
        height: 30px;
        border: none;
        border-bottom: 1px solid #ddd;
        outline: none;
        margin: 12px auto;
    }
    button {
        width: 280px;
        height: 40px;
        margin: 35px auto 40px auto;
        border: none;
        background: linear-gradient(-200deg, #fac0e7, #aac2ee);
        color: #fff;
        letter-spacing: 8px;
        border-radius: 10px;
        cursor: pointer;
        transition: 0.5s;
        &:hover {
            background: linear-gradient(-200deg, #aac2ee, #fac0e7);
            background-position-x: -280px;
        }
    }
    span {
        font-size: 14px;
    }
    a {
        color: plum;
        text-decoration: none;
    }
}
ul li {
    position: absolute;
    border: 1px solid #fff;
    background-color: #fff;
    width: 30px;
    height: 30px;
    list-style: none;
    opacity: 0;
}
.square li {
    top: 40vh;
    left: 60vw;
    animation: square 10s linear infinite;
    &:nth-child(2) {
        top: 80vh;
        left: 10vw;
        animation-delay: 2s;
    }
    &:nth-child(3) {
        top: 80vh;
        left: 85vw;
        animation-delay: 4s;
    }
    &:nth-child(4) {
        top: 10vh;
        left: 70vw;
        animation-delay: 6s;
    }
    &:nth-child(5) {
        top: 10vh;
        left: 10vw;
        animation-delay: 8s;
    }
}

.circle li {
    bottom: 0;
    left:15vw;
    animation:circle 10s linear infinite;
    &:nth-child(2){
        left:35vw;
        animation-delay: 2s;
    }
    &:nth-child(3){
        left:55vw;
        animation-delay: 4s;
    }
    &:nth-child(4){
        left:75vw;
        animation-delay: 6s;
    }
    &:nth-child(5){
        left:90vw;
        animation-delay: 8s;
    }
}


@keyframes square {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}


@keyframes circle {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }
    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}
